import React from "react";
import "./moretopic.css"
import { Link, useParams, useNavigate } from "react-router-dom"
import { getTopicList } from "../../api/home"
import { InfiniteScroll, List } from 'antd-mobile'

function Moretopic() {
    let navigate = useNavigate();//链接跳转

    let [topicList, setTopicList] = React.useState(null)


    // 加载数据
    let [Num, editNum] = React.useState(10)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)

    React.useEffect(() => {
        getTopicList(Num).then(data => {
            console.log(data.data);
            setTopicList(data.data.data)
            setPage(data.data.total)
        })
    }, [])
    return (
        <div className="moretopic">
            <div className="top">
                <div className="left">
                    <i onClick={() => navigate("/")} className="iconfont icon-zuobian"></i>
                </div>
                <div>专题列表</div>
                <div className="right">
                    <span className="iconfont icon-sort"></span>
                </div>
            </div>
            <div className="theme-list">
                <ul>
                    {
                        topicList && topicList.map(item => {
                            return (
                                <Link to={"/detailstopic/" + item.id} key={item.id}>
                                    <li>
                                        <div className="item">
                                            <img src={item.image} />
                                            <div className="title">{item.title}</div>
                                            <div className="sub-title">
                                                {item.description}
                                            </div>
                                        </div>
                                    </li>
                                </Link>

                            )
                        })
                    }

                </ul>
                <InfiniteScroll loadMore={async () => {
                    setTimeout(() => {
                        Editflag(true)

                    }, 2000)
                    // console.log(flag);
                    Num += 3
                    editNum(Num)
                    // console.log(Num);
                    await getTopicList(Num).then(data => {
                        // console.log(data);
                        setTopicList(data.data.data)

                    })
                    setTimeout(() => {
                        Editflag(false)

                    }, 2000)


                }} hasMore={flag == false && Num < page}
                    threshold={50}
                />
            </div>
        </div>
    )
}

export default Moretopic;